.rt-loader-base {
    width: 50px;
    aspect-ratio: 1;
    display: flex;
}

.rt-loader-base:before,
.rt-loader-base:after {
    content: "";
    flex: 1;
    margin: 0 0 0 -2px;
    --c: no-repeat linear-gradient(#046D8B 0 0);
    background:
        var(--c) 0 0,
        var(--c) 100% 0,
        var(--c) 100% 100%,
        var(--c) 0 100%,
        var(--c) 0 50%;
    animation: l17 1s infinite alternate;
}

.rt-loader-base:before {
    transform: scale(-1);
    margin: 0 -2px 0 0;
}

@keyframes l17 {

    0%,
    5% {
        background-size: 0 4px, 4px 0, 0 4px, 4px 0, 0 4px
    }

    20% {
        background-size: 100% 4px, 4px 0, 0 4px, 4px 0, 0 4px
    }

    40% {
        background-size: 100% 4px, 4px 100%, 0 4px, 4px 0, 0 4px
    }

    60% {
        background-size: 100% 4px, 4px 100%, 100% 4px, 4px 0, 0 4px
    }

    80% {
        background-size: 100% 4px, 4px 100%, 100% 4px, 4px 50%, 0 4px
    }

    95%,
    100% {
        background-size: 100% 4px, 4px 100%, 100% 4px, 4px 50%, 100% 4px
    }
}


.rt-loader-1 {
    width: 40px;
    height: 20px;
    --c: no-repeat radial-gradient(farthest-side, var(--m1-9) 93%, var(--m1-9));
    background:
        var(--c) 0 0,
        var(--c) 50% 0;
    background-size: 8px 8px;
    position: relative;
    clip-path: inset(-200% -100% 0 0);
    animation: l6-0 1.5s linear infinite;
}

.rt-loader-1:before {
    content: "";
    position: absolute;
    width: 8px;
    height: 12px;
    background: var(--m2-9);
    left: -16px;
    top: 0;
    animation:
        l6-1 1.5s linear infinite,
        l6-2 0.5s cubic-bezier(0, 200, .8, 200) infinite;
}

.rt-loader-1:after {
    content: "";
    position: absolute;
    inset: 0 0 auto auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--m1-9);
    animation: l6-3 1.5s linear infinite;
}

@keyframes l6-0 {

    0%,
    30% {
        background-position: 0 0, 50% 0
    }

    33% {
        background-position: 0 100%, 50% 0
    }

    41%,
    63% {
        background-position: 0 0, 50% 0
    }

    66% {
        background-position: 0 0, 50% 100%
    }

    74%,
    100% {
        background-position: 0 0, 50% 0
    }
}

@keyframes l6-1 {
    90% {
        transform: translateY(0)
    }

    95% {
        transform: translateY(15px)
    }

    100% {
        transform: translateY(15px);
        left: calc(100% - 8px)
    }
}

@keyframes l6-2 {
    100% {
        top: -0.1px
    }
}

@keyframes l6-3 {

    0%,
    80%,
    100% {
        transform: translate(0)
    }

    90% {
        transform: translate(26px)
    }
}

/* HTML: <div class="loader"></div> */
.rt-loader-2 {
    width: 80px;
    aspect-ratio: 1.154;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    --c: no-repeat linear-gradient(#1677ff 0 0);
    background: var(--c), var(--c), var(--c), var(--c), var(--c);
    background-size: 100% calc(100%/5 + 1px);
    animation: l15 1.2s infinite;
}

@keyframes l15 {
    0% {
        background-position: 0 calc(-2*100%/4), 0 calc(-2*100%/4), 0 calc(-2*100%/4), 0 calc(-2*100%/4), 0 calc(-2*100%/4)
    }

    20% {
        background-position: 0 calc(4*100%/4), 0 calc(-2*100%/4), 0 calc(-2*100%/4), 0 calc(-2*100%/4), 0 calc(-2*100%/4)
    }

    40% {
        background-position: 0 calc(4*100%/4), 0 calc(3*100%/4), 0 calc(-2*100%/4), 0 calc(-2*100%/4), 0 calc(-2*100%/4)
    }

    60% {
        background-position: 0 calc(4*100%/4), 0 calc(3*100%/4), 0 calc(2*100%/4), 0 calc(-2*100%/4), 0 calc(-2*100%/4)
    }

    80% {
        background-position: 0 calc(4*100%/4), 0 calc(3*100%/4), 0 calc(2*100%/4), 0 calc(1*100%/4), 0 calc(-2*100%/4)
    }

    100% {
        background-position: 0 calc(4*100%/4), 0 calc(3*100%/4), 0 calc(2*100%/4), 0 calc(1*100%/4), 0 calc(0*100%/4)
    }
}